<template>
	<view>
		<view class="long-list">
			<view class="long-item" @click="naviTo(l.serial_id)" v-for="(l, i) in LongList" :key="l.id">
				<view class="long-image">
					<image :src="l.cover" mode="widthFix"></image>
					<text class="image-sub"># 已完结</text>
					<text class="image-title">{{l.serial_title}}</text>
				</view>
				<view class="long-info">
					<view class="long-title">
						{{l.forward}}
					</view>
					<view class="long-sub">
						{{l.subtitle}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'find/serial/byyear/2020'
	
	export default {
		name:"LongWriting",
		data() {
			return {
				LongList: []
			};
		},
		created() {
			http(url).then(res => {
				// console.log(res);
				this.LongList = res.data
				console.log(this.LongList);
			})
		},
		methods: {
			naviTo(id) {
				uni.navigateTo({
					url: '../../pages/LongDetails/LongDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.long-list {
		padding: 10px;
		// margin-bottom: 15px;
		width: 750rpx;
	}
	
	.long-item {
		margin-bottom: 10px;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 2px 2px 10px 1px #e2e2e2; 
	}
	
	.long-image {
		position: relative;
		width: 100%;
		
		image {
			width: 100%;
			height: 100%;
		}
		
		.image-sub {
			padding: 10px;
			position: absolute;
			z-index: 1000;
			top: 10;
			left: 0;
			color: #fff;
			font-size: 12px;
		}
		
		.image-title {
			padding: 10px;
			margin-bottom: 5px;
			position: absolute;
			z-index: 1000;
			left: 0;
			bottom: 0;
			color: #fff;
			font-size: 16px;
			font-weight: 600;
		}
	}
	
	.long-info {
		padding: 8px 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #a1a1a1;
		
		.long-title {
			margin-bottom: 8px;
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.long-sub {
			font-size: 10px;
		}
	}
</style>